{% extends "layout.html" %}

{%- block title -%}Welcome {%- endblock -%}

{% block head %}
	{{ super() }}
{% endblock %}

{%- block extrastyles -%}
	<style type="text/css">
		.center {			
			text-align: center;
		}
		
		.bigTitle {
			margin: 20px;
			font-size: 40px;
		}
		
		#myCarousel img {
			width: 538px;
			height: 425px;
		}
	</style>
{%- endblock -%}

{%- block extrascripts -%}
	<script type="text/javascript" src="static/js/jquery.js"></script>
	<script type="text/javascript" src="static/js/bootstrap-transition.js"></script>
	<script type="text/javascript" src="static/js/bootstrap-carousel.js"></script>
	<script type="text/javascript" src="static/js/jquery.maskedinput-1.3.js"></script>
	<script type="text/javascript">
		$(function() {
			// save a few thousand hits to the server with this simple validation
			$("#exam_number").mask("99999999");
			// $("#pin").mask("99999");
		});
	</script>
{%- endblock -%}

{% block content %}
	<div class="container">
	
		<h1 class="center bigTitle">Some cool title (I suck at them)</h1>
		
		<div class="span7 columns">
			<div id="myCarousel" class="carousel slide">
				<div class="carousel-inner">
					<div class="item active">
						<img src="static/images/images.jpg" alt="">
						<div class="carousel-caption">
							<h4>So 2012!</h4>
							<p>Deploy in the Cloud stupid.</p>
						</div>
					</div>
					<div class="item">
						<img src="static/images/redesigned2.jpg" alt="">
						<div class="carousel-caption">
							<h4><strong>Redesigned</strong></h4>
							<p>Poor man level</p>
						</div>
					</div>
					<div class="item">
						<img src="static/images/laptop-dell.jpg" alt="">
						<div class="carousel-caption">
							<h4>Need me 1 of these</h4>
							<p>My laptop could really use a change right now.</p>
						</div>
					</div>
				</div>
				<a class="left carousel-control" href="#myCarousel" data-slide="prev">&lsaquo;</a>
				<a class="right carousel-control" href="#myCarousel" data-slide="next">&rsaquo;</a>
			</div>
		</div>		
		
		<div class="row">
			<div class="span4">
				<h3>Your results are waiting!</h3>				
					<form id="exam_details" class="well" method="POST" action="/result">
						<label>Examination Year (<span style="font-size: 10px">Doesn't work now because this is not the immediate focus of this implementation</span>)</label>
						<select name="exam_year" id="exam_year">
							<option>2010</option>
						</select>
						
						<label>Examination Number</label>
						<input type="text" class="span3" placeholder="" name="exam_number" id="exam_number">
						
						<label>PIN Number (<span style="font-size: 10px">Try numbers between 1 & 999999</span>)</label>
						<input type="text" class="span3" placeholder="" name="pin" id="pin" value = "">
                                                
						
						<button type="submit" class="btn">Check Result</button>
					</form>
			</div>
		</div>		
		
	</div>
	<script type="text/javascript">
		$(function() {
			$('.carousel').carousel();
			
			$("form#exam_details").submit(function(e) {
				$(this).attr({action: "/result" + "/" + $("#exam_year").val() + "/" + $("#exam_number").val()});
				// e.preventDefault();
			});
		});
	</script>
{% endblock %}